<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-客户管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;

        color: white;
        text-align: center;
        border: 1px solid #ebeef5;

        background-color: #409EFF;
    }
    .el-header{
        height: auto !important;
    }
    .el-main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .box-card{
        line-height: 30px;
    }
    @media screen and (max-width: 750px) {
        .el-dialog {
            width: 98% !important;
        }
        .xx_grid{
            display: grid;grid-template-columns: repeat(auto-fill,100%);grid-gap: 10px 10px;justify-content: center;margin-top: 20px;
        }
    }
    body{
        margin: 0px;
    }

</style>
<body>
<div id="content" style="display: flex;flex-direction: column;min-height: 100vh;">

    <el-container >
        <el-header><h1>Boot客户管理系统</h1></el-header>

        <el-main style=" justify-content:flex-start;">
            <el-menu  default-active="1-1"  class="el-menu-vertical-demo" @select="changeUrl">
      <el-submenu index="1" style="    min-width: 200px;" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>客户管理</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">客户查询</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">客户分析</span>
      </el-menu-item>
    </el-menu>
            <iframe :src="iframe_src" style="width: 100%;border: 0px;"></iframe>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="客户名称" >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="客户来源" >
                        <el-select v-model="form.source" placeholder="客户来源" style="width: 100%;">
                            <el-option label="地推联系" value="地推联系"></el-option>
                            <el-option label="电话联系" value="电话联系"></el-option>
                            <el-option label="主动联系" value="主动联系"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户所属行业"  >
                        <el-select v-model="form.industry" placeholder="客户所属行业" style="width: 100%;">
                            <el-option label="计算机行业" value="计算机行业"></el-option>
                            <el-option label="金融保险行业" value="金融保险行业"></el-option>
                            <el-option label="其他行业" value="其他行业"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户级别"  >
                        <el-select v-model="form.level" placeholder="客户级别" style="width: 100%;">
                            <el-option label="高级会员" value="高级会员"></el-option>
                            <el-option label="中级会员" value="中级会员"></el-option>
                            <el-option label="普通会员" value="普通会员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="固定电话" >
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" >
                        <el-input v-model="form.mobile" autocomplete="off"></el-input>
                    </el-form-item>


                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogConfirm">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-footer>SpringBoot-Boom客户管理系统 - power by xiaoxi</el-footer>
    </el-container>
</div>

<script>
    var app2 = new Vue({
        el: '#content',
        data: {
            dialogTitle:'',
            iframe_src:"manager.html",
            dialogFormVisible:false,
            form:{},
            levels:['普通会员','中级会员','高级会员'],
        },
        mounted:function(){

        },
        methods:{
            dialogConfirm: function(){
                if(parent.app2.dialogTitle=="新增客户"){
                    document.querySelector("iframe").contentWindow.app.AddCustomer();
                }
                if(parent.app2.dialogTitle=="修改客户信息"){
                    document.querySelector("iframe").contentWindow.app.ModifyCustomer();
                }
                parent.app2.dialogFormVisible=false
            },
            levelChange: function(level){
                switch (level) {

                    case '普通会员':
                        num=0
                        break;
                    case '中级会员':
                        num=1
                        break;
                    case '高级会员':
                        num=2
                        break;
                    default:
                        break;
                }
                return num;
            },
            changeUrl(key) {
                console.log(key);
                switch (key) {
                    case'1-1':  app2.iframe_src="manager.html";break;
                    case '2' :  app2.iframe_src="analysis.html";break;
                    default: break;

                }
            },

        }
    })
</script>

</body>
</html>